<template>
  <div class="sign">
    <van-tabs v-model:active="active" @click="toggle">
      <van-notice-bar left-icon="volume-o" :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item v-for="(item, index) in incentiveList" :key="index">
            {{ item.sentence }}
          </van-swipe-item>
        </van-swipe>
      </van-notice-bar>
      <van-tab>
        <template #title>
          <van-icon name="send-gift" color="orange" />运动打卡
        </template>
        <tab1-view
          @getSignStatus="status = $event"
          @changeTab="active = $event"
          @active="active = $event"
          :toggle="tab1"
        ></tab1-view>
      </van-tab>
      <van-tab>
        <template #title>
          <van-icon name="fire" color="rgb(238, 10, 36)" />每日一练
        </template>
        <van-pull-refresh v-model="loading" @refresh="loading = false">
          <tab2-view
            :status="status"
            :loading="loading"
            :toggle="tab2"
            @active="active = $event"
          ></tab2-view>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getIncentiveList } from "@/api/mobile/sign";
import Tab1View from "./Tab1View.vue";
import Tab2View from "./Tab2View.vue";
export default {
  name: "SignView",
  components: {
    Tab1View,
    Tab2View,
  },
  created() {
    this.getIncentiveList();
  },
  data() {
    return {
      active: 0,
      loading: false,
      status: false,
      tab1: false,
      tab2: false,
      incentiveList: [],
    };
  },
  methods: {
    // 此切换仅仅是为了传给子组件一个动态值，保证能被watch监听到并进行刷新页面
    toggle(index) {
      if (index === 0) {
        this.tab1 = !this.tab1;
      } else if (index === 1) {
        this.tab2 = !this.tab2;
      }
    },
    // 获取激励列表
    async getIncentiveList() {
      const res = await getIncentiveList();
      this.incentiveList = res.data;
    },
  },
};
</script>

<style lang="less" scoped>
.sign {
  min-height: 100vh;

  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
}
</style>